<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>转盘</title>
	<link rel="stylesheet" href="css/common_mobile.css">
	<link rel="stylesheet" href="css/index.css">
	<!-- 移动端适配 -->
	<script>
		var html = document.querySelector('html');
			changeRem();
			window.addEventListener('resize', changeRem);

			function changeRem() {
				var width = html.getBoundingClientRect().width;
				html.style.fontSize = width / 10 + 'px';
			}
	</script>
</head>

<body>
	<div id="wrap">
		<div class="caidai"></div>
		<div class="header clearfix">
			<p class="rule fl">规则</p>
			<!--      <a href="" id="myWin">
                <p class="my fr">我的奖品</p>
            </a> -->
			<!-- <div class="title"></div> -->
		</div>
		<!--轮盘-->
		<div class="rotate">
			<div class="lunpai">
				<ul class="prize running">
					<li>
						<span></span>
						<p>一等奖</p>
					</li>
					<li>
						<span></span>
						<p>二等奖</p>
					</li>
					<li>
						<span></span>
						<p>三等奖</p>
					</li>
					<li>
						<span></span>
						<p>四等奖</p>
					</li>
					<li>
						<span></span>
						<p>五等奖</p>
					</li>
					<li>
						<span></span>
						<p>六等奖</p>
					</li>
				</ul>
			</div>
			<div class="ring"></div>
			<div id="btn"></div>
		</div>
		<div class="border">
			您有
			<span id="change"> 0 </span> 次抽奖机会
		</div>
		<!--滚动信息-->
		<!-- <div class="scroll">
            <p></p>
            <div>
                <ul>
                    <li>
                        恭喜<span>******</span>获得<span>奖品1</span>
                    </li>
                </ul>
            </div>
        </div> -->
		<!-- 兑换模块 -->
		<div style="height: 1rem;clear: both;"></div>
		<div class="exchange">
			<input class="input" id="redeem_codes" type="text" placeholder="请输入兑换码">
			<div class="butn" id="butn">
				点击兑换
			</div>
		</div>
		<div style="height: 1.125rem;"></div>
		<!-- 奖品模块 -->
		<div class="prizelist">
			<div class="list">
				<div class="list1">
					<div class="prizetitle">
						奖&nbsp;品&nbsp;展&nbsp;示
					</div>
					<div style="height: 1.125rem;"></div>
					<div class="box1"></div>
					<div class="box2">
						<div class="img1">
							<img src="image/prize/1.JPG" alt="">
							<br />
							<a>一等奖</a>
							<p>iPhone15promax配MacBook</p>
						</div>
					</div>
					<div class="box1"></div>
					<div class="box2">
						<div class="img1">
							<img src="image/51.png" alt="">
							<br />
							<a>二等奖</a>
							<p>2888元现金红包</p>
						</div>
					</div>
					<div class="box1"></div>

					<div class="box3"></div>
					<div class="box1"></div>
					<div class="box2">
						<div class="img1">
							<img src="image/prize/3.JPG" alt="">
							<br />
							<a>三等奖</a>
							<p>iPhone15配iPad </p>
						</div>
					</div>
					<div class="box1"></div>
					<div class="box2">
						<div class="img1">
							<img src="image/51.png" alt="">
							<br />
							<a>四等奖</a>
							<p>1666元现金红包</p>
						</div>
					</div>
					<div class="box1"></div>
					<div class="box3"></div>
					<div class="box1"></div>
					<div class="box2">
						<div class="img1">
							<img src="image/prize/5.JPG" alt="">
							<br />
							<a>五等奖</a>
							<p>switch游戏机</p>
						</div>
					</div>
					<div class="box1"></div>
					<div class="box2">
						<div class="img1">
							<img src="image/51.png" alt="">
							<br />
							<a>六等奖</a>
							<p>388元现金红包</p>
						</div>
					</div>
					<div class="box1"></div>
				</div>
			</div>
		</div>
		<div style="height: 10rem;"></div>
		<!--游戏规则弹窗-->
		<div id="mask-rule">
			<div class="box-rule">
				<span class="star"></span>
				<h2>活动规则说明</h2>
				<span id="close-rule"></span>
				<div class="con">
					<div class="text">
						<p>1、一次只能兑换一个兑换码，兑换成功后抽奖后才能再次兑换</p>
						<!-- <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                        <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> -->
					</div>
				</div>
			</div>
		</div>
		<!--中奖提示-->
		<div id="mask">
			<div class="blin"></div>
			<div class="caidai"></div>
			<div class="winning">
				<div class="red-head"></div>
				<div class="red-body"></div>
				<div id="card">
					<!-- <a href="" target="_self" class="win"></a> -->
					<p class="showZJinfo"></p>
				</div>
				<a href="" target="_self" class="btn"></a>
				<span id="close"></span>
			</div>
		</div>
	</div>
	<!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script> -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.rotate.js"></script>
	<script src="js/h5_game_common.js?version=1.0.0"></script>
	<script src="js/index.js"></script>
</body>

</html>